<script setup lang="ts">
  import { CheckboxConfig } from '../../../hooks/types'
  import CustomInput from '../../component-list/CustomInput.vue'

  defineOptions({
    name: 'OrderCustomFormCheckboxSetting',
  })

  const emits = defineEmits<{
    (e: 'change'): void
  }>()

  // 绑定的值
  const value = defineModel<CheckboxConfig>('modelValue', { required: true })

  /**
   * 多选选项添加按钮点击事件
   */
  const onCheckboxOptionAddClick = () => {
    value.value.options.push('')
    emits('change')
  }

  /**
   * 多选选项删除按钮点击事件
   * @param {number} index - 选项索引
   */
  const handleCheckboxOptionDelClick = (index: number) => {
    value.value.options.splice(index, 1)
    emits('change')
  }
</script>

<template>
  <div class="order-custom-form-checkbox-setting">
    <div class="setting-item checkbox">
      <div class="label">
        <div class="text">多选选项</div>
        <h-link @click="onCheckboxOptionAddClick">添加选项</h-link>
      </div>
      <div class="value">
        <div
          v-for="(checkboxOption, checkboxOptionIndex) in value.options"
          :key="checkboxOptionIndex"
          class="item"
        >
          <div class="input">
            <custom-input
              v-model="value.options[checkboxOptionIndex]"
              :placeholder="`请输入第${checkboxOptionIndex + 1}个选项的名称`"
              @input="emits('change')"
            />
          </div>
          <h-link type="error" @click="handleCheckboxOptionDelClick(checkboxOptionIndex)"
            >删除</h-link
          >
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .order-custom-form-checkbox-setting {
    display: flex;
    flex-direction: column;
    row-gap: 16px;

    .setting-item {
      display: flex;
      flex-direction: column;
      row-gap: 4px;
    }

    .checkbox {
      .label {
        display: flex;
        column-gap: 12px;
      }

      .value {
        display: flex;
        flex-direction: column;
        row-gap: 8px;

        .item {
          display: flex;
          align-items: center;
          column-gap: 8px;

          .input {
            flex: 1;
          }
        }
      }
    }
  }
</style>
